    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>我的优惠</title>
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/sale/bespeak/bespeak.css" />
		<link rel="stylesheet" href="../../../css/sale/mine/coupon.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		
	</style>
	
	<body>
		<div class="mui-content" id="pay" v-cloak>
		    <div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						未使用{{noUseSize}}
					</a>
					<a class="mui-control-item" href="#item2mobile" >
						已使用{{usedSize}}
					</a>
					<a class="mui-control-item" href="#item3mobile">
						已过期{{overDueSize}}
					</a>
				
				</div>
				<div class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div  class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section>
									<div class="couponBox" v-for="noUse in noUseList">
										<li class="cash" v-if="noUse.type==3">
											<p>
												<span class="sum"><i>￥</i>{{noUse.discount}}</span>
												<span>代金券</span>
											</p>
											<p><span v-if="noUse.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
												<span>未使用</span>
											</p>
										</li>
										<li class="discount" v-if="noUse.type==2">
											<p>
												<span class="sum">{{noUse.discount}}折</span>
												<span>折扣券</span>
											</p>
											<p><span v-if="noUse.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
												<span>未使用</span>
											</p>
										</li>
										<li class="fullcut" v-if="noUse.type==1">
											<p>
												<span class="sum"><i>￥</i>{{noUse.discount}}</span>
												<span>满减券</span>
											</p>
											<p>使用条件：满{{noUse.limitAmount}}减{{noUse.discount}}</p>
											<p class="line3">
												<span>使用期限：{{noUse.beginTime|replaceT}}~{{noUse.endTime|replaceT}}</span>
												<span>未使用</span>
											</p>
										</li>
									</div>
								</section>
								<div class="noData" v-show="!noUseList.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div  class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section>
									<div class="couponBox" v-for="used in usedList">
										<li class="Used" v-if="used.type==3">
											<p>
												<span class="sum"><i>￥</i>{{used.discount}}</span>
												<span>代金券</span>
											</p>
											<p><span v-if="used.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{used.beginTime|replaceT}}~{{used.endTime|replaceT}}</span>
												<span>已使用</span>
											</p>
											<span class="used"></span>
										</li>
										<li class="Used" v-if="used.type==2">
											<p>
												<span class="sum">{{used.discount}}折</span>
												<span>折扣券</span>
											</p>
											<p><span v-if="used.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{used.beginTime|replaceT}}~{{used.endTime|replaceT}}</span>
												<span>已使用</span>
											</p>
											<span class="used"></span>
										</li>
										<li class="Used" v-if="used.type==1">
											<p>
												<span class="sum"><i>￥</i>{{used.discount}}</span>
												<span>满减券</span>
											</p>
											<p>使用条件：满{{used.limitAmount}}减{{used.discount}}</p>
											<p class="line3">
												<span>使用期限：{{used.beginTime|replaceT}}~{{used.endTime|replaceT}}</span>
												<span>已使用</span>
											</p>
											<span class="used"></span>
										</li>
									</div>
								</section>
								<div class="noData" v-if="!usedList.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<section >
									<div class="couponBox" v-for="overDue in overDueList">
										<li class="Used" v-if="overDue.type==3">
											<p>
												<span class="sum"><i>￥</i>{{overDue.discount}}</span>
												<span>代金券</span>
											</p>
											<p><span v-if="overDue.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{overDue.beginTime|replaceT}}~{{overDue.endTime|replaceT}}</span>
												<span>已过期</span>
											</p>
											<span class="overdue"></span>
										</li>
										<li class="Used" v-if="overDue.type==2">
											<p>
												<span class="sum">{{overDue.discount}}折</span>
												<span>折扣券</span>
											</p>
											<p><span v-if="overDue.limitAmount==0"></span></p>
											<p class="line3">
												<span>使用期限：{{overDue.beginTime|replaceT}}~{{overDue.endTime|replaceT}}</span>
												<span>已过期</span>
											</p>
											<span class="overdue"></span>
										</li>
										<li class="Used" v-if="used.type==1">
											<p>
												<span class="sum"><i>￥</i>{{overDue.discount}}</span>
												<span>满减券</span>
											</p>
											<p>使用条件：满{{overDue.limitAmount}}减{{overDue.discount}}</p>
											<p class="line3">
												<span>使用期限：{{overDue.beginTime|replaceT}}~{{overDue.endTime|replaceT}}</span>
												<span>已过期</span>
											</p>
											<span class="overdue"></span>
										</li>
									</div>
								</section>
								<div class="noData" v-if="!overDueList.length>0">
									<p><img src="../../../img/nodata.png"/></p>
									<p>暂无内容</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/cmms.js?time=333"></script>
		<script>
			new Vue({
				el:"#pay",
				data:{
					isShow:false,
					noUseList:[],
					usedList:[],
					overDueList:[],
					noUseSize:'',
					usedSize:'',
					overDueSize:''
				},
				mounted(){
//					var vConsole = new VConsole();
					this.muiInit();
					this.loadInfo();
				},
				methods:{
					muiInit(){
						mui.init({
							swipeBack: false
						});
						mui('.mui-scroll-wrapper').scroll({
							indicators: true //是否显示滚动条
						});
						
					},
					loadInfo(){
						let _this = this;
						
						/*未使用*/
						AT.muiAjaxDoctor('/clinic-doctor/doctor/getdiscount','post',{
							usedStatus:0
						},function(res){
							console.log(res);
							_this.noUseList=res;
							_this.noUseSize = res.length?'('+res.length+')':'';
						});
						/*已使用*/
						AT.muiAjaxDoctor('/clinic-doctor/doctor/getdiscount','post',{
							usedStatus:1
						},function(res){
							console.log(res);
							_this.usedList=res;
							_this.usedSize = res.length?'('+res.length+')':'';
						});
						/*已过期*/
						AT.muiAjaxDoctor('/clinic-doctor/doctor/getdiscount','post',{
							usedStatus:2
						},function(res){
							console.log(res);
							_this.overDueList=res;
							_this.overDueSize = res.length?'('+res.length+')':'';
						});
					},
				}
			})
		</script>
	</body>
</html>

